<template>
	<div v-bind:class="{'sideBar': $store.state.isCollapse, 'sideBar1': !$store.state.isCollapse}">
		<ul class="menu" v-if="$store.state.isCollapse">
			<li class="home">
				<router-link to="/index" class="subnavTop"><i class="icon iconfont icon-shouye"></i><span>首页</span></router-link>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-xitong"></i>系统管理</a>
				<ul class="subnav">
					<li>
						<router-link to="/user" class="">操作人员</router-link>
					</li>
					<li>
						<router-link to="/role" class="">角色管理</router-link>
					</li>
					<li>
						<router-link to="/author" class="">权限管理</router-link>
					</li>
					<li>
						<router-link to="/system" class="">系统选项</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-jichuguanli"></i>基础管理</a>
				<ul class="subnav">
					<li>
						<router-link to="/dictionary" class="">词典管理</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-yewuchuli-"></i>业务处理</a>
				<ul class="subnav">
					<li>
						<router-link to="/merch" class="">商户入驻</router-link>
					</li>
					<li>
						<router-link to="/coupon" class="">优惠发布</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-tubiaodiaozheng323"></i>统计分析</a>
				<ul class="subnav">
					<li>
						<router-link to="/census" class="">领卷统计</router-link>
					</li>
					<li>
						<router-link to="/useCoupons" class="">用卷统计</router-link>
					</li>
					<li>
						<router-link to="/overdue" class="">过期统计</router-link>
					</li>
					<li>
						<router-link to="/busistat" class="">商家统计</router-link>
					</li>
				</ul>
			</li>
		</ul>
		<ul class="menu1" v-else="">
			<li class="home">
				<router-link to="/index" class="subnavTop"><i class="icon iconfont icon-shouye"></i><span>首页</span></router-link>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-xitong"></i><span>系统管理</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/user" class="">操作人员</router-link>
					</li>
					<li>
						<router-link to="/role" class="">角色管理</router-link>
					</li>
					<li>
						<router-link to="/author" class="">权限管理</router-link>
					</li>
					<li>
						<router-link to="/system" class="">系统选项</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-jichuguanli"></i><span>基础管理</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/dictionary" class="">词典管理</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-yewuchuli-"></i><span>业务处理</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/merch" class="">商户入驻</router-link>
					</li>
					<li>
						<router-link to="/coupon" class="">优惠发布</router-link>
					</li>
				</ul>
			</li>
			<li>
				<a class="subnavTop"><i class="icon iconfont icon-tubiaodiaozheng323"></i><span>统计分析</span></a>
				<ul class="subnav1">
					<li>
						<router-link to="/census" class="">领卷统计</router-link>
					</li>
					<li>
						<router-link to="/useCoupons" class="">用卷统计</router-link>
					</li>
					<li>
						<router-link to="/overdue" class="">过期统计</router-link>
					</li>
					<li>
						<router-link to="/busistat" class="">商家统计</router-link>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	import store from '@/vuex/store'
	export default {
		name: 'sideBar',
		store,
		mounted: function() {
			$('.router-link-active').parent().parent().siblings().css('color','#9289ca')
			$(".home").click(function(){
    				$(".subnav").hide(300)
    		})
			$('.subnav').hide();
			$('.menu>li').on('click', function() {
				var that = $(this)
				$(this).children('.subnavTop').css('color','#9289ca')
				.parent().siblings().children('.subnavTop').
				css('color','#e1e2e3').end().end().children('.subnav')
				.toggle(200).addClass("animated slideInLeft")
				.parent().siblings().children("ul").hide(300)
				setTimeout(function() {
					that.children("ul").removeClass("slideInLeft animated")
				}, 1000);
			})
			$(".menu>li>ul").click(function(){
    				event.stopPropagation();
    	 	})
		},
		methods: {}
	}
</script>

<style>
	.sideBar {
		padding-top: 60px;
		width: 200px;
		height: 100%;
		background: #3a3f51;
		position: fixed;
		transition: all 0.2s ease;
		z-index: 99;
	}
	.sideBar1 {
		padding-top: 60px;
		width: 70px;
		height: 100%;
		background: #3a3f51;
		position: fixed;
		transition: all 0.2s ease;
		z-index: 99;
	}
	
	.menu {
		width: 100%;
		color: #fff;
		padding-bottom: 20px;
	}
	
	.menu a {
		color: #fff;
		text-decoration: none;
	}
	
	.nav-menu>li {
		position: relative;
		transition: all 0.3s;
	}
	
	.subnav li a {
		padding-left: 45px;
		transition: all 0.3s;
	}
	
	.nav-menu li {
		border-left: 3px solid transparent;
		-webkit-transition: border-left-color 0.2s ease;
		-o-transition: border-left-color 0.2s ease;
		transition: all 0.2s ease;
	}
	
	.menu a {
		color: #e1e2e3;
		padding: 12px 24px;
		letter-spacing: .025em;
		font-weight: 400;
		cursor: pointer;
		display: block;
		text-decoration: none;
		transition: all .3s;
	}
	
	.router-link-active {
		color: #9289ca !important;
	}
	@keyframes slideInLeft {
		from {
			transform: translate3d(-100%, 0, 0);
			visibility: visible;
		}
		to {
			transform: translate3d(0, 0, 0);
		}
	}
	
	.slideInLeft {
		animation-name: slideInLeft;
	}
	
	.animated {
		animation-duration: 1s;
		animation-fill-mode: both;
	}
	
	.animated.infinite {
		animation-iteration-count: infinite;
	}
	.menu .icon{
		font-size: 20px;
	}
	
	.menu1 a {
		color: #fff;
		text-decoration: none;
	}
	.menu1{
		height: 100%;
		width: 70px;
		color: #fff;
		transition: all 0.3s;
	}
	.menu1 .icon{
		font-size: 40px;
	}
	.menu1 span{
		display: none;
		transition: all 0.3s;
	}
	.menu1>li{
		padding: 10px 0;
		position: relative;
	}
	.menu1>li>a{
		text-align: center;
		display: block;
		
	}
	.menu1>li>.subnav1{
		width: 200px;
		background:  #3a3f51;
		position: absolute;
		display: none;
		top: 0;
		left: 67px;
		z-index: 99;
		transition: all 0.3s;
		border-left: 2px solid #2f3447;
	}
	.subnav1>li{
		line-height: 40px;
		text-indent: 20px;
	}
	.menu1>li:hover .subnav1{
		display: block !important;
	}
</style>